<template>
    <div class="luckDraw">
        <div class="container">
            <div class="turntable-wrapper">
                 <div class="center">
                    <div class="container" id="container">
                        <div id="turntable" style="opacity:0"></div>
                        <div class="con-box">
                            <div class="lottery-img-bg lotter-route" id="lottery"></div>
                        </div>
                        <img :src=imageUrl class="btn" v-on:click="starLottery" />
                    </div>
                </div>
            </div>
        </div>
        <div class="toast" id="pop-toast" data-attr="奖品弹框" v-show="toast_control">
            <div class="toast-container">
                <div class="close" @click="close_toast()"></div>
                <div class="pop-container">
                <div class="pop-head">
                    <img v-if="prizeItemMsg.img" :src="prizeItemMsg.img">
                    <span v-else class="pop-money">{{prizeItemMsg.des}}</span>
                    <p class="pop-name">
                    {{prizeItemMsg.name}}
                    </p>
                </div>
                <div class="pop-main">
                    <p>恭喜您获得</p>
                    <p>“{{prizeItemMsg.name}}”</p>
                    <p class="daijin" v-if="isDaijin">*请保存该抽奖码前往店消费使用：{{daijinCode}}</p>
                </div>
                </div>
                <div class="toast-btn pop-btn"   @click="clickGetAddr(prizeItemMsg)"></div>
            </div>
        </div>
        <div class="toast" v-show="toast_giftCode" data-attr="抽奖码弹框" >
            <div class="toast-container">
                <img src="./img/code_title.png" class="toast-picture">
                <div class="close" @click="close_giftCode()"></div>
                <div class="toast-title">
                    <input class="code_input" v-model="codeNumber" type="text" name="" placeholder="请输入抽奖码" value="">
                </div>
                <div class="toast-btn">
                    <button type="button" class="toast-cancel"  @click="clickClodeSure()" name="button">确定</button>
                </div>
            </div>
        </div>
        <div class="toast-mask" v-show="toast_control || toast_giftCode"></div>
        <!--二维码弹出框 v-if="isShowLayer"-->
        <div class="reCode-layer" v-if="isShowLayer">
          <div class="reCode-layer__info">
            <img src="./recode.png" class="recode-img"/>
            <span>可长按识别二维码</span>
            <span class="add-team">加入团队扶持创业</span>
            <img src="./close.svg" class="close-img" @click="closeCodeLayer"/>
          </div>
          
        </div>
    </div>
    
</template>
<script>
// yin
import $ from "n-zepto";
import api from "@/fetch/api";
import { Toast } from "mint-ui";
export default {
  name: "lottery",

  data: function() {
    return {
      width: 320,
      downline: false,
      toast_control: false,
      toast_giftCode: false,
      codeNumber: "",
      imageUrl: "../static/images/lottery/btn.png",
      prize: 1,   // 中奖位置
      prizeItemMsg: {},
      daijinCode: null,
      isDaijin: false,
      reCodeImg: '',
      isShowLayer: false,
      prize_list: [
      {
        "id": 1,
        "name": "醒肤霜",
        "type": "1",
        "des": "128元"
      }, {
        "id": 2,
        "type": "2",
        "name": "晨露水",
        "des": "128元",
      },{
        "id": 3,
        "type": "1",
        "name": "能量乳",
        "des": "128元"
      }, {
        "id": 4,
        "name": "洁面乳",
        "type": "1",
        "des": "68元"
      }, {
        "id": 6,
        "type": "2",
        "name": "青春时光多效护理套",
        "des": "6999元",
      }, {
        "id": 7,
        "name": "姜王洗护套装",
        "type": "2",
        "des": "98元",
      }, {
        "id": 8,
        "type": "2",
        "name": "青春时光水光皙润套",
        "des": "6999元",
      }
    ],
      
    };
  },
  created() {
    this.width = document.documentElement.clientWidth;
  },
  components: {
    Toast
  },
  methods: {
    closeCodeLayer() {
      this.isShowLayer = false
    },
    //关闭弹窗
    close_toast() {
      this.toast_control = false;
    },
    clickGetAddr(prize) {
      // 显示二维码
      if(prize.type == '5') {
        this.toast_control = false
        this.isShowLayer = true
        return
      }
      this.$router.push({
        path: "/activity/luckyWheel/address",
        query: {
            code: this.getlocalStorage('codeNumber'),
            type: 2
        }
      });
      // if (prize.type == "1") {
      //   console.log("代金券");
      //   this.isDaijin = true;
      //   this.daijinCode = this.getlocalStorage("codeNumber");
      //   // 返回码，提示截图
      // } else if (prize.type == "2") {
      //   console.log("需要邮寄");
      //   this.$router.push({
      //     path: "/activity/luckyWheel/address",
      //     query: {
      //       code: this.getlocalStorage("codeNumber"),
      //       type: 2
      //     }
      //   });
      // } else if (prize.type == "3") {
      //   console.log("现金红包");
      //   this.$router.push({
      //     path: "/activity/luckyWheel/address",
      //     query: {
      //       code: this.getlocalStorage("codeNumber"),
      //       type: 3
      //     }
      //   });
      // } else {
      //   console.log("默认");
      // }
    },
    //关闭输入抽奖码的弹框
    close_giftCode() {
      this.toast_giftCode = false;
      this.codeNumber = "";
    },
    // 请求获取抽奖码fn
    clickClodeSure() {
      var _this = this;
      $.ajax({
        type: "post",
        data: {
          code: this.codeNumber
        },
        url: "http://api.sailafeinav.com/choujiang/v1/",
        success: function(res) {
          console.log(res);
          //抽到的奖品
          _this.prize = res.code;
          console.log(_this.prize);
          _this.setlocalStorage("codeNumber", _this.codeNumber);
          if(_this.prize == '5') {
              _this.toast_giftCode = false
              _this.starLottery();
            return
          }
          
          for (var i = 0; i < _this.prize_list.length; i++) {
            var prizeItem = _this.prize_list[i];
            if (prizeItem.id == _this.prize) {
              _this.prizeItemMsg = prizeItem;
              _this.toast_giftCode = false;
              _this.starLottery();
              _this.codeNumber = "";
            }
          }
        },
        error: function(res) {
          console.log(JSON.parse(res.response));
          console.log(44)
          if (res.responseJSON) {
            Toast(res.responseJSON.error);
            _this.codeNumber = "";
          } else {
            let str = JSON.parse(res.response)
            Toast({
              message: str.error,
              duration: 1000
            });
          }
        }
      });
    },
    init: function(options) {
      this.opts = this.extend({}, this.defaultOpts(), options);
      if (!this.opts.values) {
        throw Error("values必须要有值");
      }

      var half = this.opts.size / 2;
      this.center = {
        x: half,
        y: half,
        r: half
      };
      //圆的x轴坐标
      this.startPoint = {
        x: this.opts.size,
        y: half
      };
      this.values = this.opts.values;
      this.count = this.opts.values.length;
      this.degree = 360 / this.count;

      this.container = null;
      this.svg = null;

      if (this.opts.container) {
        this.draw(this.opts.container);
      }
    },
    defaultOpts: function() {
      return {
        type: "frame",
        size: this.width,
        textSpace: 15,
        imgSpace: 20,
        speed: 10,
        fastSpeed: 20,
        slowSpeed: 2,
        speedUp: 200,
        speedDown: 200,
        values: [],
        className: "turntable-effect",
        ring: 8
      };
    },
    appendCSS: function(css) {
      var head = document.head || document.getElementsByTagName("head")[0];
      var style = document.createElement("style");
      style.appendChild(document.createTextNode(css));
      head.appendChild(style);
    },
    requestAnimationFrame:
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame,
    extend: function(target) {
      var arguments$1 = arguments;

      for (var i = 0; i < arguments.length; i++) {
        var arg = arguments$1[i];
        for (var p in arg) {
          target[p] = arg[p];
        }
      }
      return target;
    },
    random: function(min, max) {
      return min + Math.floor(Math.random() * (max - min + 1));
    },
    getValueIndexById: function(id) {
      var r = this.values
        .filter(function(d) {
          return d.id == id;
        })
        .map(function(d) {
          return d.index;
        });

      return r[this.random(0, r.length - 1)];
    },
    getValueDegreeByIndex: function(index) {
      return this.values[index].degree;
    },
    setTransform: function(val) {
      this.svg.style.msTransform = val;
      this.svg.style.oTransform = val;
      this.svg.style.mozTransform = val;
      this.svg.style.webkitTransform = val;
      this.svg.style.transform = val;
      let imgBg = document.getElementById("lottery");

      imgBg.style.msTransform = val;
      imgBg.style.oTransform = val;
      imgBg.style.mozTransform = val;
      imgBg.style.webkitTransform = val;
      imgBg.style.transform = val;
    },
    turning: function() {
      console.log(33);
      this.turnTotal += this.turnBase;
      if (this.turnTotal >= 360 || this.turnTotal <= -360) {
        this.turnTotal = 0;
      }

      this.setTransform("rotate(" + -this.turnTotal + "deg)");
    },
    turned: function() {
      if (this.turnTotal >= 360 || this.turnTotal <= -360) {
        this.turnTotal = 0;
      }
      this.turnTotal += this.turnBase;

      if (parseInt(this.turnTotal, 10) == parseInt(this.turnEndDegree)) {
        cancelAnimationFrame(this.animation);
        this.setTransform("rotate(" + -this.turnTotal + "deg)");
        this.isTurning = false;
        this.turnCallback(this.opts.values[this.index]);
        return false;
      }
      this.setTransform("rotate(" + -this.turnTotal + "deg)");
      return true;
    },
    turn: function() {
      this.animation = requestAnimationFrame(
        function() {
          if (!this.isTurnStop) {
            this.turning();
            this.turn();
          } else {
            if (this.turned()) {
              this.turn();
            }
          }
        }.bind(this)
      );
    },
    start: function() {
      if (this.isTurning) {
        return;
      }
      this.turnBase = this.opts.speed;
      this.turnTotal = 0;
      this.isTurnStop = false;
      this.index = null;
      this.isTurning = true;
      this.turn();

      setTimeout(
        function() {
          this.turnBase = this.opts.fastSpeed;
        }.bind(this),
        this.opts.speedUp
      );
    },
    stop: function(id, cb) {
      this.index = this.getValueIndexById(id);
      this.turnEndDegree = this.getValueDegreeByIndex(this.index);
      this.turnBase = this.opts.slowSpeed;
      if (typeof cb !== "function") {
        cb = function() {};
      }
      this.turnCallback = cb;

      setTimeout(
        function() {
          this.turnBase = 1;
          this.isTurnStop = true;
        }.bind(this),
        this.opts.speedDown
      );
    },
    goto: function(id, cb) {
      if (this.isTurning) {
        return;
      }
      this.isTurning = true;

      var deg = Math.abs(
        this.svg.style.transform.replace("rotate(", "").replace("deg)", "") || 0
      );

      var ndeg = deg != 0 ? Math.abs(this.turnEndDegree) : 0;
      ndeg = Math.abs(this.opts.ring * 360 + deg - ndeg);

      this.index = this.getValueIndexById(id);
      console.log(this.index);
      this.turnEndDegree = 360 - this.getValueDegreeByIndex(this.index);
      this.turnCallback = cb;

      this.setTransform("rotate(" + (ndeg + this.turnEndDegree) + "deg)");
    },
    movePoint: function(oPoint, tPoint, dis, len) {
      var x = -1 * ((dis * (tPoint.x - oPoint.x)) / len - tPoint.x);
      var y = -1 * ((dis * (tPoint.y - oPoint.y)) / len - tPoint.y);
      return { x: x, y: y };
    },
    getPathPoint: function(oPoint, degree) {
      return {
        x: oPoint.x + oPoint.r * Math.cos(degree * (Math.PI / 180)),
        y: oPoint.y + oPoint.r * Math.sin(degree * (Math.PI / 180)),
        degree: degree
      };
    },
    setAttrs: function(ele, attrs) {
      for (var t in attrs) {
        if (t == "href") {
          ele.setAttributeNS("http://www.w3.org/1999/xlink", t, attrs[t]);
        } else {
          ele.setAttribute(t, attrs[t]);
        }
      }

      return ele;
    },
    createSvgElement: function(name) {
      return document.createElementNS("http://www.w3.org/2000/svg", name);
    },
    getPointsDistance: function(o, t) {
      return Math.sqrt(Math.pow(t.x - o.x, 2) + Math.pow(t.y - o.y, 2));
    },
    draw: function(container) {
      var this$1 = this;

      var that = this;
      this.container = container;

      var svg = this.setAttrs(this.createSvgElement("svg"), {
        width: this.opts.size,
        height: this.opts.size,
        xmlns: "http://www.w3.org/2000/svg",
        "xmlns:xlink": "http://www.w3.org/1999/xlink"
      });

      var degree = this.degree;
      var pathStartPoint = this.startPoint;
      var pathEndPoint = this.getPathPoint(this.center, degree);

      var target = this;
      this.values = this.values.map(function(info, i) {
        info.degree =
          i == 0
            ? 90 + this$1.degree / 2
            : this$1.values[i - 1].degree + this$1.degree;
        if (info.degree >= 360) {
          info.degree = info.degree - 360;
        }
        info.index = i;

        var g = target.createSvgElement("g");

        var path = target.setAttrs(target.createSvgElement("path"), {
          fill: info.bg,
          d:
            "\n          M" +
            this$1.center.x +
            ", " +
            this$1.center.y +
            "\n          L" +
            pathStartPoint.x +
            ", " +
            pathStartPoint.y +
            "\n          A" +
            this$1.center.x +
            ", " +
            this$1.center.y +
            "\n          1 0, 1\n          " +
            pathEndPoint.x +
            ", " +
            pathEndPoint.y +
            "\n          z\n        "
        });

        g.appendChild(path);

        var fanCenterPoint = {
          x: (pathEndPoint.x + pathStartPoint.x) / 2,
          y: (pathEndPoint.y + pathStartPoint.y) / 2
        };

        var centerDistance = target.getPointsDistance(
          fanCenterPoint,
          this$1.center
        );

        var textDegree = 180 - (360 - this$1.degree * 2) / 2 / 2;
        var textPoint = target.movePoint(
          this$1.center,
          fanCenterPoint,
          this$1.opts.textSpace,
          centerDistance
        );
        var rotate = textDegree + this$1.degree * i;

        var text = target.setAttrs(target.createSvgElement("text"), {
          x: textPoint.x,
          y: textPoint.y,
          "text-anchor": "middle",
          fill: info.color,
          transform:
            "rotate(" + rotate + ", " + textPoint.x + ", " + textPoint.y + ")"
        });
        text.appendChild(document.createTextNode(info.name));

        g.appendChild(text);

        if (info.img) {
          var imgPoint = target.movePoint(
            this$1.center,
            fanCenterPoint,
            this$1.opts.imgSpace,
            centerDistance
          );
          var img = target.setAttrs(target.createSvgElement("image"), {
            width: info.img.width,
            height: info.img.height,
            href: info.img.src,
            x: imgPoint.x,
            y: imgPoint.y,
            transform:
              "rotate(" +
              rotate +
              ", " +
              imgPoint.x +
              ", " +
              imgPoint.y +
              ") translate(" +
              -(info.img.width / 2) +
              ", " +
              -(info.img.height / 2) +
              ")"
          });
          g.appendChild(img);
        }

        svg.appendChild(g);

        pathStartPoint = pathEndPoint;
        pathEndPoint = target.getPathPoint(
          this$1.center,
          this$1.degree + this$1.degree * (i + 1)
        );

        return info;
      });

      container.appendChild(svg);
      this.svg = svg;

      if (this.opts.type == "transition") {
        this.initTransition();
      }
    },
    initTransition: function() {
      var this$1 = this;

      this.setAttrs(this.svg, { class: this.opts.className });

      this.svg.addEventListener(
        "transitionend",
        function() {
          this$1.isTurning = false;
          this$1.turnCallback(this$1.values[this$1.index]);
        },
        false
      );

      this.appendCSS(
        "\n      ." +
          this.opts.className +
          " {\n        -webkit-transition: -webkit-transform " +
          this.opts.speed +
          "s ease-in-out;\n        transition: transform " +
          this.opts.speed +
          "s ease-in-out;\n      }\n    "
      );
    },
    starLottery: function() {
      let _this = this
      // 活动结束的提示
      if (this.downline) {
        return Toast(this.downlineText);
      }
      if (!this.codeNumber) {
        this.toast_giftCode = true;
        return Toast("请输入抽奖码再抽奖");
      }
      //这里指定转到哪个位置，从后台获取
      this.goto(this.prize, function(val) {
        console.log(val);
        if(_this.prize == '5'){
          _this.isShowLayer = true
          _this.codeNumber = ''
          return
        }
        setTimeout(() => {
          this.toast_control = true;
        }, 500);
      });
    }
  },
  mounted: function() {
    var eleWidth = $("#container").width();
    $("#container").css("left", ($(document).width() - eleWidth) / 2 + "px");
    this.init({
      type: "transition",
      size: this.width - 20,
      textSpace: 15,
      imgSpace: 54,
      values: [
        {
          id: 1,
          name: "醒肤霜",
          img: {
            width: 50,
            height: 50,
            src: ""
          },
          color: "#fc796f",
          bg: "#fffdeb"
        },
        {
          id: 2,
          name: "晨露水",
          img: {
            width: 45,
            height: 57,
            src: ""
          },
          color: "#fbe0e1",
          bg: "#ed6e71"
        },
        {
          id: 3,
          name: "能量乳",
          img: {
            width: 45,
            height: 57,
            src: ""
          },
          color: "#fc796f",
          bg: "#fffdeb"
        },
        {
          id: 4,
          name: "洁面乳",
          img: {
            width: 50,
            height: 35,
            src: ""
          },
          color: "#fbe0e1",
          bg: "#ed6e71"
        },
        {
          id: 5,
          name: "0元创业",
          img: {
            width: 50,
            height: 50,
            src: ""
          },
          color: "#fc796f",
          bg: "#fffdeb"
        },
        {
          id: 6,
          name: "青春时光多效护理套",
          img: {
            width: 50,
            height: 35,
            src: ""
          },
          color: "#fbe0e1",
          bg: "#ed6e71"
        },
        {
          id: 7,
          name: "姜王洗护套装",
          img: {
            width: 30,
            height: 60,
            src: ""
          },
          color: "#fc796f",
          bg: "#fffdeb"
        },
        {
          id: 8,
          name: "青春时光水光皙润套",
          img: {
            width: 30,
            height: 57,
            src: ""
          },
          color: "#fbe0e1",
          bg: "#ed6e71"
        }
      ]
    });

    this.draw(document.getElementById("turntable"));
    this.isTurning = false;
  }
};
</script>

<style scoped>
.add-team {
  font-size: 0.6rem !important
}
.reCode-layer { 
  width: 100%;
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  background:rgba(0, 0, 0,0.6);
  padding: 0 20px;
  z-index: 100;
  box-sizing: border-box;
}
.reCode-layer__info {
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  position: relative;
  height: 9rem;
  /* background: url("./recode.png") no-repeat center top;
  background-size: 100% 100%; */
}
.reCode-layer__info > .recode-img {
  width: 60%;
  height: 60%;
  margin-bottom: 5px;
  opacity: 1;
  margin-bottom: 0.6rem
} 
.reCode-layer__info > .close-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  z-index: 100;
  
} 
.reCode-layer__info > span {
  font-size: 0.4rem;
  color: #fa3b5c
}
.center {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.container {
  position: relative;
}
.container .btn {
    position: absolute;
    width: 3.5rem;
    top: 24%;
    left: 33%;
    transform: translateZ(0);
    outline: 1px solid transparent;
}
.luckDraw .turntable-wrapper {
  position: relative;
  background: url("./lay.png") no-repeat center top;
  background-size: 100% 100%;
  padding-top: 6rem;
  padding-bottom: 2.2rem;
}
.con-box{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10rem;
    top: -10px;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.lottery-img-bg {
  width: 95%;
  height:95%;
  background: url(./letter.png) no-repeat center center;
  background-size: 100% 100%;
  transition: transform 10s ease-in-out;
}

.luckDraw .turntable-wrapper .luck-wrapper {
  margin: 0 auto;
  position: relative;
  /* @include background-cover("background-turntable.png"); */
}

.nineGrid {
  width: 8.2rem;
  margin-left: 1rem;
  position: relative;
}
.nineGrid li {
  height: 1.72rem;
  display: flex;
  margin-top: 1px;
}
.nineGrid li > div {
  flex: 1;
  margin-right: 1px;
  text-align: center;
  position: relative;
}
.nineGrid li > div .wrapper {
  width: 100%;
  height: 100%;
  padding: 0.08rem;
}
.nineGrid li > div img {
  width: 1.8rem;
  vertical-align: middle;
  border-radius: 0.3rem;
  position: relative;
  z-index: 2;
  margin-top: 0.06rem;
}
.nineGrid li > div .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  border-radius: 10px;
  background-color: #fdf052;
  display: none;
}
.nineGrid li > div.active .mask {
  display: block;
}
.nineGrid li > div:first-child {
  margin-left: 1px;
}
.nineGrid li > div.getLuck {
  /* @include background-cover("background-getLuck.png"); */
  font-size: 0;
}

.nineGrid li:last-child {
  margin-bottom: 1px;
}
.nineGrid li > div.center-item {
  flex: none;
  position: absolute;
}
.nineGrid li > div.center-item4,
.nineGrid li > div.center-item5 {
  right: 0;
}
.nineGrid li > div.center-item4 {
  top: 1.65rem;
}
.nineGrid li > div.center-item5 {
  top: 3.3rem;
}
.nineGrid li:nth-child(2) {
  height: 3.2rem;
}
.nineGrid li > div.center-item10,
.nineGrid li > div.center-item11 {
  left: 0;
}
.nineGrid li > div.center-item11 {
  top: 1.65rem;
}
.nineGrid li > div.center-item10 {
  top: 3.3rem;
}
.nineGrid li > div.getLuck img {
  width: 3.7rem;
}
.nineGrid li > div.center-item img {
  margin-top: 0;
}
.tip {
  position: relative;
  margin: 1.2rem auto 0;
  width: 8.5rem;
  border: 1px solid #fbc27f;
  margin-top: 2rem;
}
.tip-title {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 0.5rem;
  color: #fccc6e;
  background: #fa3b5c;
  padding: 0.1525rem 0.325rem;
  border: 1px solid #fbc27f;
}
.tip-content {
  padding: 0.7625rem 0.325rem;
  font-size: 0.4rem;
  color: #fff8c5;
  line-height: 1.5;
}
.mycontent div.btn-lottery {
  width: 4.8rem;
  text-align: center;
  line-height: 1rem;
  color: #fff;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 2rem;
}

/* 弹框 */
.code_input {
  width: 80%;
  padding: 0.3rem;
  border: 2px solid #fccc6e;
  border-radius: 0.1rem;
}
.toast-mask {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4;
  width: 100%;
  height: 100%;
}
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 7.4375rem;
  background: #fff;
  border-radius: 0.1525rem;
  padding: 0.1525rem;
  background-color: rgba(252, 244, 224);
}
.toast-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.toast-picture {
  position: absolute;
  top: -2.2rem;
  left: -0.7rem;
  width: 8.75rem;
  height: 3.5rem;
}
.toast-pictrue-change {
  position: absolute;
  top: -0.7rem;
  left: -0.875rem;
  width: 8.5rem;
  height: 1.525rem;
}
.toast-title {
  padding: 1.4125rem 0;
  font-size: 18px;
  color: #fc7939;
  text-align: center;
}
.toast-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4375rem;
}
.toast-btn button {
  border: none;
  background-image: -moz-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );

  background-image: -ms-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );
  background-image: -webkit-linear-gradient(
    -18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%
  );
  box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
  width: 2.6875rem;
  height: 0.975rem;
  border-radius: 0.975rem;
  text-align: center;
  line-height: 0.975rem;
  color: #fff;
}
:focus {
  outline: 0;
}
.close {
  position: absolute;
  top: -0.4375rem;
  right: -0.4375rem;
  width: 1rem;
  height: 1rem;
  background: url("./img/close_store.png") no-repeat center top;
  background-size: 100%;
}
#pop-toast {
  background: url("./img/pop-bg.png") no-repeat center top;
  background-size: 100%;
  height: 10rem;
}
#pop-toast .pop-container .pop-head {
  /* margin-top: 2.1rem; */
  padding-top: 2.1rem;
  text-align: center;
}
#pop-toast .pop-container .pop-head img {
  width: 2rem;
  height: 2rem;
  border-radius: 5rem;
  display: inline-block;
}
#pop-toast .pop-container .pop-head .pop-name {
  margin-top: 0.4rem;
  color: #fff;
}
#pop-toast .pop-container .pop-main {
  text-align: center;
  margin-top: 0.6rem;
}
#pop-toast .pop-container .pop-main p {
  font-size: 0.45rem;
  font-weight: 600;
}
#pop-toast .pop-btn {
  margin-top: 0.6rem;
  height: 1.2rem;
}
.pop-money {
  font-size: 0.6rem;
  height: 2rem;
  color: #ff3f32;
  display: block;
  line-height: 2rem;
  text-align: center;
}
#pop-toast .pop-container .pop-main p.daijin {
  font-size: 0.3rem;
  color: red;
  margin-top: 0;
  font-weight: 500;
}
</style>
